<template>
  <div class="form-item-container">
    <div class="form-item-title">
      <span style="color: #ff3d3d" v-if="mod.isRequired == true">* </span>
      {{ mod.title }}
    </div>
    <div
      class="form-item-options"
      v-if="mod.type == 'options' || mod.type == 'date' || mod.type == 'calendar'"
      @click="showP"
    >
      <div>{{ optionsContent }}</div>
      <img src="@/assets/img/form/right_arrow_icon.png" />
    </div>
    <!-- @update:model-value="changeMethod"      @input="changeMethod($event)"-->
    <van-field
      class="form-item-input"
      v-model="inputValue"
      rows="1"
      autosize
      type="textarea"
      input-align="right"
      v-else-if="mod.type == 'input'"
      :placeholder="placeholderStr"
      :maxlength="mod.maxlength"
     
    />
    <div class="form-item-content" v-else>
      {{ mod.content }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { isEmpty } from "@/utils/utils";
/* 
mod 的显示格式为 {
  title 标题
  content 内容
  tag: 用于区分相同标题的字段
  formart: 格式化内容
  type 类型 options下拉选择框 date 时间选择器 input输入框 默认是label显示内容
  isRequired 是否必传
  placeholder 输入框默认文案 默认是请输入
  maxlength 输入框最大限制字数
} 
*/
const props = defineProps({
  mod: {
    type: Object,
    default() {
      return {
        title: "",
        content: "",
        tag: "",
        formart: "",
        type: "",
        placeholder: "",
        maxlength: 1000000,
        isRequired: false,
      };
    },
  },
});
const emit = defineEmits(["showPick", "changeInput"]);
const inputValue = computed({
  get() {
    if (props.mod?.type == "input") {
      return props.mod?.content 
    }
    return !isEmpty(props.mod?.content) ? props.mod?.content : "-"
  },
  set(value) {
    const formParams = {
    title: props.mod.title,
    content: value,
    tag: props.mod.tag,
    formart: props.mod.formart,
    type: props.mod.type,
    placeholder: props.mod.placeholder,
    maxlength: props.mod.maxlength,
    isRequired: props.mod.isRequired,
  };
  emit("changeInput", formParams);
  }
});

const placeholderStr = computed(() => {
  return !isEmpty(props.mod?.placeholder) ? props.mod.placeholder : "请输入";
});

//下拉框内容回显
const optionsContent = computed(() => {
  
  if (isEmpty(props.mod?.content)) {
    return "请选择";
  }
  //content,date,calendar有值的情况下，判断是否是下拉框 formart有值取formart, 没值取content，都没值取请选择
  if (props.mod?.type == "options" || props.mod?.type == "date" || props.mod?.type == 'calendar') {
    if (isEmpty(props.mod?.formart)) {
      return props.mod?.content.length > 0 ? props.mod?.content : "请选择";
    }
    return props.mod.formart;
  }
  //其他类型，且content不为空，取content
  return props.mod?.content;
});

const showP = () => {
  emit("showPick", props.mod);
};

</script>

<script>
export default {
  name: "formMainListItem",
};
</script>

<style lang="less" scoped>
@import "@/assets/css/vant-custom.css";
.form-item-container {
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  height: 100%;
  .form-item-title {
    margin-left: 28px;
    color: #666666;
    min-width: 136px;
    width: auto;
  }
  .form-item-content {
    z-index: 2;
    margin-right: 28px;
    color: #333333;
  }
  .form-item-options {
    z-index: 2;
    font-size: 28px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 28px;
    img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }
  }
  .form-item-input {
    z-index: 2;
    font-size: 28px;
    font-weight: 400;
    line-height: 40px;
    // margin-right: 28px;
    width: 60%;
  }

  :deep(.van-field__control) {
    padding: 0px;
  }
}
</style>
